<!-- DEPRECATED, plase use @datawrapper/controls instead -->
<ControlGroup disabled="{disabled}" width="{width}" label="{label}" help="{help}">
    <input disabled="{disabled}" type="text" class="input-large" placeholder="{placeholder}" bind:value />
</ControlGroup>

{#if disabled && disabled_msg}
<div transition:slide>
    <div class="disabled-msg">
        {@html disabled_msg}
    </div>
</div>
{/if}

<style>
    label.control-label {
        vertical-align: top !important;
        position: relative;
        top: 6px;
    }

    .disabled-msg {
        font-size: 11px;
        padding-top: 0;
        padding-bottom: 5px;
        font-style: italic;
        color: #a8a8a8;
        line-height: 1.2;
    }
</style>

<script>
    import ControlGroup from './ControlGroup.html';
    import slide from 'svelte-transitions-slide';

    export default {
        components: { ControlGroup },
        data() {
            return {
                disabled: false,
                disabled_msg: '',
                unit: '',
                width: '100px',
                help: '',
                placeholder: ''
            };
        },
        transitions: { slide }
    };
</script>
